<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>并联选择器</title>

        <style type="text/css">
            .wrapper { border: 1px solid blue ; width: 800px ; margin: 25px auto ; }

            /* 我们所谓的 "并联选择器": 两个选择器都书写，两个选择器中间没有任何分隔符 */
            .wrapper.desc { text-align: center ; }

            /* "并联选择器": 选择既匹配于第一个选择器 又 匹配于第二个选择器 的元素 */
            .wrapper.first { background: #dedede ; }

            /* "并联选择器": 寻找哪些class中既包含 wrapper 有包含 second 的元素 */
            .wrapper.second { background: #9696ff ; }

            /* "并联选择器": 寻找哪些class中 third 的 div 元素 */
            div.third { background: #ffff00 ; }

            /* 选择器列表 ( 国内部分资料将其称作 选择器分组 或 分组选择器 )*/
            .first , .second , .third { height: 50px ; }

        </style>

    </head>
    <body>

        <div class="wrapper desc">
            <h3>并联选择器</h3>
            <p>"并联选择器" 是我们自己捏造的名称，可以与某些人说的 "并列选择器" 是一回事。</p>
            <p>所谓 "并联选择器" 是指 两个选择器 同时书写，中间没有任何分隔符</p>
        </div>

        <div class="wrapper first"></div>
        <div class="first">ffff</div>

        <div class="wrapper second"></div>
        <div class="second">ssss</div>

        <div class="wrapper third"></div>
        <p class="wrapper third">tttt</p>
        
    </body>
</html>